<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#/">首页</a>
    <a href="#/find">发现</a>
    <a href="#/my">我的</a>
    <div class="box"></div>
    <script>
        const routes = [{
                path: "/",
                component: "首页"
            },
            {
                path: "/find",
                component: "发现"
            },
            {
                path: "/my",
                component: "我的"
            }
        ]
        // let box = document.querySelector('.box');
        // let hash = null;
        // // 当页面hash改变的时候触发
        // window.addEventListener('hashchange', () => {
        //     init();
        // })
        // // 页面加载完毕
        // window.addEventListener('load', () => {
        //     init();
        // })
        // // 初始化
        // const init = () => {
        //     // 获得当前页面的hash
        //     hash = window.location.hash.slice(1) || '/';
        //     // 在路由表中寻找
        //     let res = routes.find((item) => item.path === hash);
        //     // 修改dom元素内容
        //     box.innerHTML = res.component;
        // }

        class Hash {
            constructor(routes) {
                this.routes = routes;
                this.box = document.querySelector('.box');
                this.hash = null;
                this.init();
            }
            init() {
                // 当页面hash改变的时候触发
                window.addEventListener('hashchange', () => {
                    this.updated();
                })
                // 页面加载完毕
                window.addEventListener('load', () => {
                    this.updated();
                })
            }
            updated() {
                // 获得当前页面的hash
                this.hash = window.location.hash.slice(1) || '/';
                // 在路由表中寻找
                let res = routes.find((item) => item.path === this.hash);
                // 修改dom元素内容
                this.box.innerHTML = res.component;
            }
        }
        new Hash(routes)
    </script>
</body>

</html>